{% extends "base.html" %}

{% block title %}通知中心 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .notifications-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    .notifications-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .notifications-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #495057;
    }
    .notification-actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .mark-all-read-btn {
        padding: 0.5rem 1rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .mark-all-read-btn:hover {
        background-color: #0056b3;
    }
    .delete-all-read-btn {
        padding: 0.5rem 1rem;
        background-color: #dc3545;
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .delete-all-read-btn:hover {
        background-color: #c82333;
    }
    .filter-nav {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 2rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
    }
    .filter-item {
        padding: 0.75rem 1.5rem;
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        font-weight: 500;
        color: #6c757d;
        transition: all 0.2s;
    }
    .filter-item:hover {
        color: #007bff;
    }
    .filter-item.active {
        color: #007bff;
        border-bottom-color: #007bff;
        font-weight: 600;
    }
    .notifications-list {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 2rem;
    }
    .notification-item {
        display: flex;
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s;
        cursor: pointer;
    }
    .notification-item:hover {
        background-color: #f8f9fa;
    }
    .notification-item:last-child {
        border-bottom: none;
    }
    .notification-item.unread {
        background-color: #f8f9ff;
    }
    .notification-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #e3f2fd;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1.5rem;
        flex-shrink: 0;
        font-size: 1.25rem;
        color: #1976d2;
    }
    .notification-icon.important {
        background-color: #ffebee;
        color: #d32f2f;
    }
    .notification-icon.info {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    .notification-icon.warning {
        background-color: #fff3e0;
        color: #f57c00;
    }
    .notification-icon.course {
        background-color: #e8f5e9;
        color: #388e3c;
    }
    .notification-icon.activity {
        background-color: #ede7f6;
        color: #7b1fa2;
    }
    .notification-icon.resource {
        background-color: #e0f2f1;
        color: #006064;
    }
    .notification-content {
        flex: 1;
    }
    .notification-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }
    .notification-title {
        font-weight: 600;
        color: #495057;
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
    .notification-message {
        color: #6c757d;
        margin-bottom: 0.75rem;
        line-height: 1.5;
    }
    .notification-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.875rem;
        color: #adb5bd;
    }
    .notification-time {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .notification-actions-dropdown {
        position: relative;
    }
    .notification-actions-btn {
        background: none;
        border: none;
        color: #adb5bd;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.25rem;
        display: none;
    }
    .notification-item:hover .notification-actions-btn {
        display: inline-block;
    }
    .notification-actions-btn:hover {
        background-color: #e9ecef;
        color: #495057;
    }
    .notification-dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 120px;
        background-color: white;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        z-index: 1000;
        display: none;
    }
    .notification-dropdown-menu.show {
        display: block;
    }
    .notification-dropdown-item {
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: background-color 0.2s;
        font-size: 0.875rem;
    }
    .notification-dropdown-item:hover {
        background-color: #f8f9fa;
    }
    .notification-dropdown-item.delete {
        color: #dc3545;
    }
    .notification-dropdown-item.delete:hover {
        background-color: #ffebee;
    }
    .empty-notifications {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }
    .empty-notifications-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        color: #adb5bd;
    }
    .empty-notifications-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }
    .empty-notifications-description {
        margin-bottom: 1.5rem;
    }
    .empty-notifications-btn {
        padding: 0.75rem 1.5rem;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .empty-notifications-btn:hover {
        background-color: #0056b3;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.25rem;
        margin-bottom: 1.5rem;
    }
    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .alert-danger {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }
    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }
    /* 响应式设计 */
    @media (max-width: 768px) {
        .notifications-header {
            flex-direction: column;
            align-items: stretch;
        }
        .notification-actions {
            justify-content: center;
        }
        .filter-nav {
            justify-content: center;
        }
        .notification-item {
            padding: 1rem;
        }
        .notification-icon {
            width: 40px;
            height: 40px;
            font-size: 1rem;
            margin-right: 1rem;
        }
        .notification-title {
            font-size: 1rem;
        }
        .notification-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-bell mr-2 text-primary"></i>通知中心
    </h1>
    <p class="text-gray-600">查看和管理您的各类通知信息</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="notifications-container">
    <!-- 页面头部 -->
    <div class="notifications-header">
        <h2 class="notifications-title">我的通知</h2>
        <div class="notification-actions">
            <button id="mark-all-read-btn" class="mark-all-read-btn">
                <i class="fa fa-check-circle"></i>
                全部标记为已读
            </button>
            <button id="delete-all-read-btn" class="delete-all-read-btn">
                <i class="fa fa-trash"></i>
                删除已读通知
            </button>
        </div>
    </div>
    
    <!-- 筛选导航 -->
    <div class="filter-nav">
        <div class="filter-item active" data-filter="all">全部通知</div>
        <div class="filter-item" data-filter="unread">未读通知</div>
        <div class="filter-item" data-filter="important">重要通知</div>
        <div class="filter-item" data-filter="course">课程通知</div>
        <div class="filter-item" data-filter="activity">活动通知</div>
        <div class="filter-item" data-filter="resource">资源通知</div>
        <div class="filter-item" data-filter="system">系统通知</div>
    </div>
    
    <!-- 通知列表 -->
    <div class="notifications-list" id="notifications-list">
        <!-- 未读通知示例 -->
        <div class="notification-item unread" data-type="course">
            <div class="notification-icon course">
                <i class="fa fa-book"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">课程更新通知</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">您选修的《计算机网络》课程已经更新了本周的课件和作业，请及时查看。</p>
                <div class="notification-meta">
                    <span class="notification-type">课程通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        10分钟前
                    </span>
                </div>
            </div>
        </div>
        
        <div class="notification-item unread" data-type="activity">
            <div class="notification-icon activity">
                <i class="fa fa-calendar"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">活动提醒</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">您报名的"校园科技创新大赛"将于明天下午2点在学术中心举行，请准时参加。</p>
                <div class="notification-meta">
                    <span class="notification-type">活动通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        2小时前
                    </span>
                </div>
            </div>
        </div>
        
        <div class="notification-item unread" data-type="important">
            <div class="notification-icon important">
                <i class="fa fa-exclamation-circle"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">成绩公布通知</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">您的《数据结构》期中考试成绩已经公布，请登录系统查看详细成绩报告。</p>
                <div class="notification-meta">
                    <span class="notification-type">重要通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        昨天 14:30
                    </span>
                </div>
            </div>
        </div>
        
        <!-- 已读通知示例 -->
        <div class="notification-item" data-type="resource">
            <div class="notification-icon resource">
                <i class="fa fa-file-text"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">新资源推荐</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">根据您的学习兴趣，我们为您推荐了《Python机器学习实战》资源包，点击查看详情。</p>
                <div class="notification-meta">
                    <span class="notification-type">资源通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        2天前
                    </span>
                </div>
            </div>
        </div>
        
        <div class="notification-item" data-type="system">
            <div class="notification-icon info">
                <i class="fa fa-info-circle"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">系统升级通知</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">校园生活助手系统将于本周日凌晨2点-4点进行系统升级维护，期间可能出现短暂服务中断。</p>
                <div class="notification-meta">
                    <span class="notification-type">系统通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        3天前
                    </span>
                </div>
            </div>
        </div>
        
        <div class="notification-item" data-type="course">
            <div class="notification-icon course">
                <i class="fa fa-book"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">课程表更新</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">您的课程表已更新，《操作系统》课程时间调整为每周三下午2-4节，请查收。</p>
                <div class="notification-meta">
                    <span class="notification-type">课程通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        上周
                    </span>
                </div>
            </div>
        </div>
        
        <div class="notification-item" data-type="activity">
            <div class="notification-icon activity">
                <i class="fa fa-calendar"></i>
            </div>
            <div class="notification-content">
                <div class="notification-header">
                    <h3 class="notification-title">活动报名成功</h3>
                    <div class="notification-actions-dropdown">
                        <button class="notification-actions-btn" aria-label="通知操作">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                        <div class="notification-dropdown-menu">
                            <div class="notification-dropdown-item mark-read">标记为已读</div>
                            <div class="notification-dropdown-item delete">删除通知</div>
                        </div>
                    </div>
                </div>
                <p class="notification-message">您已成功报名"校园招聘会"，活动时间：10月25日上午9点，地点：体育馆。</p>
                <div class="notification-meta">
                    <span class="notification-type">活动通知</span>
                    <span class="notification-time">
                        <i class="fa fa-clock-o"></i>
                        2周前
                    </span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 空状态（当没有通知时显示） -->
    <!-- 
    <div class="empty-notifications">
        <div class="empty-notifications-icon">
            <i class="fa fa-bell-o"></i>
        </div>
        <div class="empty-notifications-title">暂无通知</div>
        <div class="empty-notifications-description">
            您还没有任何通知消息，继续关注课程和活动获取最新通知。
        </div>
        <button class="empty-notifications-btn">
            <i class="fa fa-calendar-plus-o mr-1"></i>
            浏览活动
        </button>
    </div>
    -->
</div>
{% endblock %}

{% block js %}
<script>
    // 获取DOM元素
    const filterItems = document.querySelectorAll('.filter-item');
    const notificationItems = document.querySelectorAll('.notification-item');
    const markAllReadBtn = document.getElementById('mark-all-read-btn');
    const deleteAllReadBtn = document.getElementById('delete-all-read-btn');
    const notificationsList = document.getElementById('notifications-list');
    const notificationActionsBtns = document.querySelectorAll('.notification-actions-btn');
    const dropdownMenus = document.querySelectorAll('.notification-dropdown-menu');
    
    // 筛选通知
    filterItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有筛选项的active类
            filterItems.forEach(filterItem => filterItem.classList.remove('active'));
            // 添加当前筛选项的active类
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            // 根据筛选条件显示或隐藏通知项
            notificationItems.forEach(notification => {
                if (filter === 'all') {
                    notification.style.display = 'flex';
                } else if (filter === 'unread') {
                    if (notification.classList.contains('unread')) {
                        notification.style.display = 'flex';
                    } else {
                        notification.style.display = 'none';
                    }
                } else {
                    if (notification.getAttribute('data-type') === filter) {
                        notification.style.display = 'flex';
                    } else {
                        notification.style.display = 'none';
                    }
                }
            });
            
            // 检查是否有可见的通知项
            checkEmptyNotifications();
        });
    });
    
    // 全部标记为已读
    markAllReadBtn.addEventListener('click', function() {
        const unreadNotifications = document.querySelectorAll('.notification-item.unread');
        
        if (unreadNotifications.length > 0) {
            // 显示加载状态
            markAllReadBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 处理中...';
            markAllReadBtn.disabled = true;
            
            // 模拟处理延迟
            setTimeout(() => {
                // 移除所有未读通知的unread类
                unreadNotifications.forEach(notification => {
                    notification.classList.remove('unread');
                });
                
                // 恢复按钮状态
                markAllReadBtn.innerHTML = '<i class="fa fa-check-circle"></i> 全部标记为已读';
                markAllReadBtn.disabled = false;
                
                // 显示成功消息
                showNotification('全部通知已标记为已读', 'success');
                
                // 重新检查筛选状态
                const activeFilter = document.querySelector('.filter-item.active');
                if (activeFilter) {
                    activeFilter.click();
                }
            }, 800);
        }
    });
    
    // 删除所有已读通知
    deleteAllReadBtn.addEventListener('click', function() {
        const readNotifications = document.querySelectorAll('.notification-item:not(.unread)');
        
        if (readNotifications.length > 0) {
            // 确认删除
            if (confirm('确定要删除所有已读通知吗？此操作不可撤销。')) {
                // 显示加载状态
                deleteAllReadBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 处理中...';
                deleteAllReadBtn.disabled = true;
                
                // 模拟处理延迟
                setTimeout(() => {
                    // 删除所有已读通知
                    readNotifications.forEach(notification => {
                        notification.remove();
                    });
                    
                    // 恢复按钮状态
                    deleteAllReadBtn.innerHTML = '<i class="fa fa-trash"></i> 删除已读通知';
                    deleteAllReadBtn.disabled = false;
                    
                    // 显示成功消息
                    showNotification('已删除所有已读通知', 'success');
                    
                    // 检查是否有可见的通知项
                    checkEmptyNotifications();
                }, 800);
            }
        }
    });
    
    // 通知项点击事件（标记为已读并打开详情）
    notificationItems.forEach(item => {
        item.addEventListener('click', function(e) {
            // 如果点击的是操作按钮或下拉菜单，不处理
            if (e.target.closest('.notification-actions-dropdown')) {
                return;
            }
            
            // 如果是未读通知，标记为已读
            if (this.classList.contains('unread')) {
                this.classList.remove('unread');
                
                // 显示成功消息
                showNotification('通知已标记为已读', 'success');
                
                // 重新检查筛选状态
                const activeFilter = document.querySelector('.filter-item.active');
                if (activeFilter && activeFilter.getAttribute('data-filter') === 'unread') {
                    activeFilter.click();
                }
            }
            
            // 这里可以添加打开通知详情的逻辑
            // 在实际应用中，这里可以跳转到通知详情页面或显示模态框
            const notificationTitle = this.querySelector('.notification-title').textContent;
            console.log('打开通知详情:', notificationTitle);
        });
    });
    
    // 通知操作按钮点击事件
    notificationActionsBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            
            // 获取对应的下拉菜单
            const dropdownMenu = this.nextElementSibling;
            
            // 关闭其他所有下拉菜单
            dropdownMenus.forEach(menu => {
                if (menu !== dropdownMenu) {
                    menu.classList.remove('show');
                }
            });
            
            // 切换当前下拉菜单的显示状态
            dropdownMenu.classList.toggle('show');
        });
    });
    
    // 下拉菜单项点击事件
    document.querySelectorAll('.notification-dropdown-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.stopPropagation(); // 阻止事件冒泡
            
            const notificationItem = this.closest('.notification-item');
            const action = this.textContent.trim();
            
            if (action === '标记为已读') {
                // 标记为已读
                notificationItem.classList.remove('unread');
                showNotification('通知已标记为已读', 'success');
                
                // 重新检查筛选状态
                const activeFilter = document.querySelector('.filter-item.active');
                if (activeFilter && activeFilter.getAttribute('data-filter') === 'unread') {
                    activeFilter.click();
                }
            } else if (action === '删除通知') {
                // 删除通知
                notificationItem.remove();
                showNotification('通知已删除', 'success');
                
                // 检查是否有可见的通知项
                checkEmptyNotifications();
            }
            
            // 关闭下拉菜单
            const dropdownMenu = this.closest('.notification-dropdown-menu');
            dropdownMenu.classList.remove('show');
        });
    });
    
    // 点击页面其他地方关闭下拉菜单
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.notification-actions-dropdown')) {
            dropdownMenus.forEach(menu => {
                menu.classList.remove('show');
            });
        }
    });
    
    // 检查是否有可见的通知项，如果没有则显示空状态
    function checkEmptyNotifications() {
        const visibleNotifications = document.querySelectorAll('.notification-item[style="display: flex;"]');
        
        // 检查是否已经有空状态元素
        let emptyState = document.querySelector('.empty-notifications');
        
        if (visibleNotifications.length === 0) {
            // 如果没有空状态元素，创建一个
            if (!emptyState) {
                emptyState = document.createElement('div');
                emptyState.className = 'empty-notifications';
                emptyState.innerHTML = `
                    <div class="empty-notifications-icon">
                        <i class="fa fa-bell-o"></i>
                    </div>
                    <div class="empty-notifications-title">暂无通知</div>
                    <div class="empty-notifications-description">
                        您还没有任何通知消息，继续关注课程和活动获取最新通知。
                    </div>
                    <button class="empty-notifications-btn">
                        <i class="fa fa-calendar-plus-o mr-1"></i>
                        浏览活动
                    </button>
                `;
                
                // 添加到通知列表中
                notificationsList.appendChild(emptyState);
                
                // 为空状态按钮添加点击事件
                emptyState.querySelector('.empty-notifications-btn').addEventListener('click', function() {
                    // 跳转到活动页面
                    window.location.href = '{{ url_for('activities') }}';
                });
            } else {
                // 如果有空状态元素，显示它
                emptyState.style.display = 'block';
            }
        } else {
            // 如果有可见的通知项，隐藏空状态元素
            if (emptyState) {
                emptyState.style.display = 'none';
            }
        }
    }
    
    // 显示通知消息
    function showNotification(message, type = 'info') {
        // 检查是否已经有通知容器
        let notificationContainer = document.querySelector('.notification-container');
        
        if (!notificationContainer) {
            notificationContainer = document.createElement('div');
            notificationContainer.className = 'notification-container';
            notificationContainer.style.position = 'fixed';
            notificationContainer.style.top = '20px';
            notificationContainer.style.right = '20px';
            notificationContainer.style.zIndex = '1050';
            document.body.appendChild(notificationContainer);
        }
        
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `alert alert-${type} alert-dismissible fade show`;
        notification.role = 'alert';
        notification.style.marginBottom = '10px';
        notification.style.minWidth = '300px';
        notification.innerHTML = `
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        
        // 添加到通知容器
        notificationContainer.appendChild(notification);
        
        // 添加关闭事件
        notification.querySelector('.close').addEventListener('click', function() {
            notification.remove();
        });
        
        // 3秒后自动关闭
        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => {
                notification.remove();
            }, 500);
        }, 3000);
    }
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const notificationsContainer = document.querySelector('.notifications-container');
        
        notificationsContainer.style.opacity = '0';
        notificationsContainer.style.transform = 'translateY(20px)';
        notificationsContainer.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            notificationsContainer.style.opacity = '1';
            notificationsContainer.style.transform = 'translateY(0)';
        }, 100);
        
        // 为通知项添加渐进式动画
        notificationItems.forEach((item, index) => {
            item.style.opacity = '0';
            item.style.transform = 'translateY(20px)';
            item.style.transition = `opacity 0.3s ease ${index * 0.05}s, transform 0.3s ease ${index * 0.05}s`;
            
            setTimeout(() => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            }, 200 + index * 50);
        });
    });
</script>
{% endblock %}